<template>
    <page-dialog
      :title="dialogInfo.title"
      v-model:visible="shows"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
    >
      <!-- 条件栏 -->
      <page-filter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.list"
      />
      <dialog-table
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="api"
        :listen-height="false"
        :query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :handle="tableInfo.handle"
        :highlight-row="highlightRow"
        :check-box="checkBox"
        :checkedList="checkBox ? checkedList : []"
        :checkedRowList="checkedRowList"
        :reserve-selection="true"
        @handleEvent="handleEvent"
        :pager="false"
      />
    </page-dialog>
  </template>
  
  <script setup name="selectSupplier">
  import PageDialog from '../PageDialog/index'
  import PageFilter from '../PageFilter/index'
  import { getMaintenanceGroupAll } from '@/api/repair.js'
  
  const { proxy } = getCurrentInstance()
  const emit = defineEmits(['update', 'callback', 'reset'])
  const props = defineProps({
    highlightRow: {
      type: Boolean,
      default: false,
    },
    checkBox: {
      type: Boolean,
      default: true,
    },
    api: {
      type: Function,
      default: getMaintenanceGroupAll,
    },
    showDialog: {
      type: Boolean,
    },
    saveEmpty: {
      type: Boolean,
      default: false,
    },
    query: {
      type: Object,
      default: function () {
        return {}
      },
    },
    checkedList: {
        type: Array,
        default: function () {
        return []
        },
    },
    checkedRowList: {
        type: Array,
        default: function () {
        return []
        },
    },
  })
  
  // 过滤相关配置
  const filterInfo = reactive({
    query: {
      nameLike: '',
      ...props.query,
    },
    list: [
      {
        type: 'input',
        label: '名称',
        value: 'nameLike',
        event: search,
      },
      { type: 'button', label: '搜索', event: search },
    ],
  })
  // 表格相关
  const tableInfo = reactive({
    refresh: 1,
    initCurpage: 1,
    data: [],
    fieldList: [
      { label: '名称', value: 'name' },
      { label: '编码', value: 'code' },
    ],
  })
  // 弹窗相关
  const dialogInfo = reactive({
    title: '选择维修组',
    btLoading: false,
    btList: [
      { label: '关闭', event: handleClose, show: true },
      {
        label: '保存',
        type: 'primary',
        disabled: !props.saveEmpty,
        event: save,
        show: true,
      },
    ],
  })
  const selectRow = ref('')
  let shows = computed({
    get() {
      return props.showDialog
    },
    set(newValue) {
      emit('update:showDialog', newValue) // 更新父组件shows
    },
  })
  
  onMounted(() => {
    proxy.$nextTick(() => {
      getList()
    })
  })
  
  // 获取列表
  function getList () {
    tableInfo.refresh = Math.random()
  }
  function search () {
    tableInfo.initCurpage = Math.random()
    tableInfo.refresh = Math.random()
  }
  function save () {
    // emit('input', data)
    handleClose()
    emit('callback', selectRow.value)
  }
  function handleEvent (event, data) {
    switch (event) {
      case 'tableClickRow':
        selectRow.value = data
        if (!props.saveEmpty) {
          filterInfo.btList[1].disabled = !selectRow.value
        }
        break
      case 'tableCheck':
        selectRow.value = data
        if (!props.saveEmpty) {
          filterInfo.btList[1].disabled = !selectRow.value.length
        }
  
        break
    }
  }
  // 关闭弹窗前的回调
  function handleClose () {
    shows.value = false
    emit('reset')
  }
  </script>
  
  <style scoped>
  :deep(.el-dialog__body) {
    height: 355px;
    display: flex;
    flex-direction: column;
  }
  </style>
  